/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from "react";
import { Button, DatePicker, Form, Input, Select } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { hyd_update, hyd_add } from "../../../api/HuangYuDong/huiyi";
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
import "../../../styles/HuangYuDong/HuiYi/HuiYiXiuGai.scss";

interface Props {}
function HuiYiXiuGai(props: Props) {
  // 时间
  let [time, useTime] = useState("");
  const { RangePicker } = DatePicker;
  const onChange = (
    value: DatePickerProps["value"] | RangePickerProps["value"],
    dateString: string
  ) => {
    console.log(dateString);
    useTime(dateString);
  };

  const { state: record } = useLocation();

  const onFinish = (values: any) => {
    console.log("Success:", values);
    if (record === null) {
      hyd_add({
        name: values.name,
        time: time,
        ctime: time,
        huiyitixing: values.tixing,
        huiyishi: values.huiyishi,
        cname: values.cname,
      }).then((ok) => {
        console.log(ok);
        navigate(-1);
      });
    } else {
      hyd_update({
        id: record.id,
        name: values.name,
        time: time,
        ctime: time,
        huiyitixing: values.tixing,
        huiyishi: values.huiyishi,
        cname: values.cname,
      }).then((ok) => {
        console.log(ok);
        navigate(-1);
      });
    }
  };
  let navigate = useNavigate();
  let fanhui = () => {
    navigate(-1);
  };
  return (
    <div className="xiugai">
      <div className="center">
        <h2>预定会议室</h2>
        <Form
          className="form"
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          style={{ maxWidth: 600 }}
        >
          <Form.Item
            label="会议名称"
            name="name"
            rules={[{ required: true, message: "请输入！！！" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="预定人员"
            name="cname"
            rules={[{ required: true, message: "请输入！！！" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="会议室"
            name="huiyishi"
            rules={[{ required: true, message: "请输入！！！" }]}
          >
            <Select>
              <Select.Option value="商务专用会议室">
                商务专用会议室
              </Select.Option>
              <Select.Option value="研发部专用会议室">
                研发部专用会议室
              </Select.Option>
              <Select.Option value="设计部会议室">设计部会议室</Select.Option>
              <Select.Option value="行政部会议室">行政部会议室</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="会议提醒"
            name="tixing"
            rules={[{ required: true, message: "请输入！！！" }]}
          >
            <Select>
              <Select.Option value="不提醒">不提醒</Select.Option>
              <Select.Option value="会议前5分钟">会议前5分钟</Select.Option>
              <Select.Option value="会议前15分钟">会议前15分钟</Select.Option>
              <Select.Option value="会议前30分钟">会议前30分钟</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="会议时间"
            name="time"
            rules={[{ required: true, message: "请输入！！！" }]}
          >
            <DatePicker showTime onChange={onChange} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button
              onClick={() => {
                fanhui();
              }}
              className="button_right"
            >
              取消
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

export default HuiYiXiuGai;
